<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.opacity-div {
				opacity: 0;
				border: 1px solid #ff0000;
			}

			.visibility-div {
				visibility: hidden;
				border: 1px solid #ff0000;
			}
		</style>
	</head>
	<body>
		<p>contenteditable：表示标签的内容可以编辑</p>
		<div contenteditable="true">我是奉先</div>
		<p>hidden：隐藏标签</p>
		<div hidden>我被隐藏了</div>
		<div class="opacity-div">我是opacity: 0</div>
		<div class="visibility-div">我是visibility: hidden</div>
		<h2>几种隐藏方式的区别</h2>
		<ul>
			<li><mark>display: none</mark>：元素不会布局（不占位置）</li>
			<li><mark>hidden属性</mark>：元素不会布局（不占位置）</li>
			<li><mark>opacity: 0</mark>：会占位置，只是内部元素完全透明了。</li>
			<li><mark>visibility: hidden</mark>：会占位置，只是内部元素不显示。</li>
		</ul>
	</body>
</html>
